<template>
    <div class="wrapper">
        <div class="wrapper_silder">
            <div class="info-box">
                <v-infos></v-infos>
            </div>
            <div class="silder-box">
                <v-silder></v-silder>
            </div>
        </div>
        <div class="wrapper_content">
            <div class="navbar-box">
                <v-navbar></v-navbar>
            </div>
            <div class="content-box">
                <v-content></v-content>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import vSilder from '@/layout/silder.vue';
import vInfos from '@/layout/infos.vue';
import vContent from '@/layout/content.vue';
import vNavbar from '@/layout/navbar.vue';

</script>

<style lang="less" scoped>
.wrapper {
    display: flex;
    border-radius: 10px;
    background-color: #f9fafb;
    width: 100%;
    height: 100%;
    overflow: hidden;
    &_silder {
        width: 200px;
        background-color: #f3f3f3;
        padding: 32px 0;
        // box-shadow: 1px 0 6px 0 rgba(0, 0, 0, 0.12);
    }
    &_content {
        flex: 1;
        height: 100%;
        width: calc(100% - 200px);
        display: flex;
        flex-direction: column;
        background-color: #f9f9f9;
        .navbar-box{
            width: 100%;
            height: 45px;
        }
        .content-box{
            width: 100%;
            height: calc(100% - 45px);
            flex: 1;
        }
    }
}
</style>
